<template>
  <div id="app">
    <Exam v-if="type == 'exam'" />
    <Game v-else-if="type == 'game'" />
    <BottleGame v-else-if="type == 'bottle'" />
    <Multiplication v-else-if="type == 'multiplication'" />
    <Mix v-else-if="type == 'mix'" />
    <Calculation v-else />
  </div>
</template>

<script>
import Calculation from './pages/Calculation.vue'
import Exam from './pages/Exam.vue'
import Mix from './pages/Mix.vue'
import Multiplication from './pages/Multiplication.vue';
import Game from './pages/Game.vue'
import BottleGame from './pages/BottleGame.vue'

export default {
  name: 'App',
  components: {
    Calculation,
    Exam,
    Mix,
    Multiplication,
    Game,
    BottleGame
  },
  data(){
    return {
      type: 'bottle'
    }
  },
  mounted(){
    let query = location.search;
    if(query.includes('calculation')){
      this.type = 'calculation';
    }
    else if(query.includes('multiplication')){
      this.type = 'multiplication'
    }
    else if(query.includes('mix')){
      this.type = 'mix'
    }
    else if(query.includes('exam')){
      this.type = 'exam'
    }
    else if(query.includes('game')){
      this.type = 'game'
    }

    else{
      this.type = 'bottle';
    }
      
    
  }
}
</script>

<style>
html{
  height: 100%;
}
body{
  height: 100%;
  margin:0;
  padding:0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;

}

* {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
